<template>
    <div id="app">
        <div class="background">
        <el-row>
            <el-col :span="16">
                <div class="grid-content bg-purple">
                    <h2></h2>
                </div>
            </el-col>
            <el-col :span="8">
                <div  class="grid-content bg-purple-light login">
                    <el-form :model="loginForm"  :rules="rules" ref="loginForm" class="ruleForm" v-loading="loading"
                             element-loading-text="拼命加载中...">
                        <el-form-item prop="loginName">
                            <el-input type="email" v-model="loginForm.email"  auto-complete="off" placeholder="邮箱"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input type="password" v-model="loginForm.password"  auto-complete="off" placeholder="密码"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" @click="login" class="login-bt">登录</el-button>
                        </el-form-item>
                        <router-link to="/register">注 册
                        </router-link>
                    </el-form>
                    <el-checkbox v-model="loginForm.checked" class="el-checkbox">记住我</el-checkbox>
                    <p class="forget" ><a href="#" @click="fogetPassword()">忘记密码？</a></p>
                </div>
            </el-col>
        </el-row>
        </div>
    </div>
</template>

<script>
    define(["vue", "axios"], function(Vue, axios) {
        return Vue.component("login", {
            template: template,
            data: function() {
                return {
                    loading: false,
                    loginForm:{
                        email: '',
                        password: '',
                    },
                    rules: {
                        loginName: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                        password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }]
                    }
                };
            },
            methods: {
                login:function () {
                    var _this = this;
                    axios.post('/login', _this.loginForm).then(function (response) {
                        console.log(response.data.data);
                        if (response.data.data){
                            sessionStorage.setItem("userId",response.data.data.id);
                            sessionStorage.setItem("userName",response.data.data.userName);
                            sessionStorage.setItem("password",response.data.data.password);
                            sessionStorage.setItem("email",response.data.data.email);
                            sessionStorage.setItem("phone",response.data.data.phone);
                            sessionStorage.setItem("sex",response.data.data.sex);
                            _this.$router.push({ name: 'home' });
                        } else {
                            _this.$message.error('用户名或密码错误');
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });

                }
            }
        });
    });
</script>

<style>
.background{
    background-image: url("../../assets/img/car.png");
    background-size: 90% ;
    background-repeat: no-repeat;
    background-position:center;
    height: 100%;
}
    .login{
        margin-top: 50%;
        margin-bottom: 30%;
        margin-left: 20%;
        margin-right: 20%;
        border: darkturquoise solid 1px;
        padding: 5%;
    }
</style>